<template>
	<div class="activity">
		<div class="activity_title">活动</div>
		<div class="activity_box">
			<img src="http://o6wndwjxn.qnssl.com/bf11a201812241039402756.png" alt="">
			<img src="http://o6wndwjxn.qnssl.com/5fd1820181224103944325.png" alt="">
			
			
			
			<img src="http://o6wndwjxn.qnssl.com/302a0201812241039548098.png" alt="" :class="shadow?'shadow_true':''"
			 @touchstart.self='activity_start' @touchend.self='activity_end'>
			 
			 <div class="" v-for=""></div>
			 
			<div class="activity_item" v-for="(item,index) in activity_list" :key='index' :class="'activity_img_am'+ item.num +''">

				<img :src="activity_img_arr[item.img]" alt="">

			</div>
		</div>
		<div class="activity_end" v-show="activity_end_status" @click="activity_click">{{activityText}}</div>
	</div>
</template>
<script>
	import Cookies from 'js-cookie'
	import axios from 'axios'
	export default {
		data() {
			return {
				img: 0,
				shadow: true,
				activityText: '',
				activity_end_status: false,
				number: 1,
				activity_list: [],
				activity_img_arr: [
					'http://o6wndwjxn.qnssl.com/d5967201812261201111216.png',
					'http://o6wndwjxn.qnssl.com/7467c201812261200597141.png',
					'http://o6wndwjxn.qnssl.com/516db201812261200293556.png',
					'http://o6wndwjxn.qnssl.com/40c27201812261200242013.png',
					'http://o6wndwjxn.qnssl.com/a7efd201812261200178879.png',
					'http://o6wndwjxn.qnssl.com/7084b20181226120013341.png',
					'http://o6wndwjxn.qnssl.com/545ea201812261200091836.png',
					'http://o6wndwjxn.qnssl.com/0833b201812261200046243.png',
					'http://o6wndwjxn.qnssl.com/2187b201812261313237559.png',
					'http://o6wndwjxn.qnssl.com/797f9201812261313281634.png'
				],
				time:null,
			};
		},
		created(){
			Cookies.set('activity_index',null)
		},
		methods: {
			activity_click() {
				this.activity_end_status = false
			},
			activity_start(e) {
				var num = Math.floor(Math.random() * 10 + 1)
				var img = Math.floor(Math.random() * 10)
				this.shadow = false
				var arr = {
					num: num,
					img: img,
					time: this.number
				}
				if(this.number%5 == 0){
					this.activity_list.push(arr)
				}
			},
			
			
			activity_end() {
				this.shadow = true
				this.number++
				if (this.number % 10 == 0) {
					let requery = {
						member_id: this.$store.state.member_id
					}
					axios.post('http://web.zhiyunzaixian.com/Party/v1.party/dianyidian', requery).then(res => {
						if (res.data.code == 200) {
							// console.log(this.activity_list)
						} else if (res.data.code == -303) {
							this.activityText = res.data.msg
							this.activity_end_status = true
						}
					})
				}
			},
		}
	}
</script>




<style>
	.activity_end {
		position: fixed;
		z-index: 200;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		color: white;
		line-height: 100vh;
		font-size: 30px;
		font-weight: bold;
	}

	.activity_img_am1 {
		animation: acronym_am1 3s;
	}

	.activity_img_am2 {
		animation: acronym_am2 3s;
	}

	.activity_img_am3 {
		animation: acronym_am3 3s;
	}

	.activity_img_am4 {
		animation: acronym_am4 3s;
	}

	.activity_img_am5 {
		animation: acronym_am5 3s;
	}

	.activity_img_am6 {
		animation: acronym_am6 3s;
	}

	.activity_img_am7 {
		animation: acronym_am7 3s;
	}

	.activity_img_am8 {
		animation: acronym_am8 3s;
	}

	.activity_img_am9 {
		animation: acronym_am9 4s;
	}

	.activity_img_am10 {
		animation: acronym_am10 4s;
	}

	@keyframes acronym_am1 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(25px, 0, 0);
		}

		50% {
			transform: translate3D(-50px, 0, 0);
		}

		75% {
			transform: translate3D(25px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am2 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(-25px, 0, 0);
		}

		50% {
			transform: translate3D(50px, 0, 0);
		}

		75% {
			transform: translate3D(-25px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am3 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(25px, 0, 0);
		}

		50% {
			transform: translate3D(50px, 0, 0);
		}

		75% {
			transform: translate3D(-55px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am4 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(-25px, 0, 0);
		}

		50% {
			transform: translate3D(-50px, 0, 0);
		}

		75% {
			transform: translate3D(55px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am5 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(30px, 0, 0);
		}

		50% {
			transform: translate3D(-60px, 0, 0);
		}

		75% {
			transform: translate3D(40px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am6 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(-5px, 0, 0);
		}

		50% {
			transform: translate3D(30px, 0, 0);
		}

		75% {
			transform: translate3D(15px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am7 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(-15px, 0, 0);
		}

		50% {
			transform: translate3D(40px, 0, 0);
		}

		75% {
			transform: translate3D(-15px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am8 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(30px, 0, 0);
		}

		50% {
			transform: translate3D(70px, 0, 0);
		}

		75% {
			transform: translate3D(-55px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am9 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(-15px, 0, 0);
		}

		50% {
			transform: translate3D(40px, 0, 0);
		}

		75% {
			transform: translate3D(55px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	@keyframes acronym_am10 {
		0% {
			top: 50vh;
			opacity: 1;
			transform: translate3D(0px, 0, 0);
		}

		25% {
			transform: translate3D(5px, 0, 0);
		}

		50% {
			transform: translate3D(-15px, 0, 0);
		}

		75% {
			transform: translate3D(20px, 0, 0);
		}

		100% {
			top: 0;
			opacity: 0;
			transform: translate3D(0px, 0, 0);
		}
	}

	.activity {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
	}

	.activity_title {
		font-size: 20px;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.activity_box {
		position: absolute;
		height: 50vh;
		left: 0;
		top: 25vh;
		width: 100%;
	}

	.activity_box>img {
		position: absolute;
		top: 0;
		border-radius: 50%;
		box-shadow: 0px 0px 2px 0px #CCCCCC;
		transition: all 0.1s;
		z-index: 1;
	}

	.activity_box>img:nth-child(1) {
		left: calc(50vw - 25vh);
		height: 100%;
		animation: activity_one infinite 5s;
	}

	.activity_box>img:nth-child(2) {
		height: 80%;
		left: calc(50vw - 25vh*0.8);
		top: 10%;
		animation: activity_one infinite 5s;
	}

	.activity_box>img:nth-child(3) {
		height: 60%;
		left: calc(50vw - 25vh*0.6);
		top: 20%;
		z-index: 2;
	}

	@keyframes activity_one {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.2;
		}

		100% {
			opacity: 1;
		}
	}

	.shadow_true {
		box-shadow: -10px 7px 25px 0px rgba(160, 3, 110, 0.68),
			-15px 6px 35px 0px #f5b926 !important;
	}

	.activity_item {
		position: fixed;
		top: 50vh;
		left: calc(50vw - 20px);
		width: 40px;
		height: 40px;
		z-index: 1;
		transition: all 0.5s;
	}
</style>
